<template>
  <el-aside class="side-menu-layout" :style="sideMenuStyle">
    <div class="sider-head hor-layout-center">
      <img class="logo-view" src="../../assets/logo.png" alt="logo"/>
      <h1 class="sider-head-title" v-show="!collapseSideMenu">{{ title }}</h1>
    </div>
    <div class="sider-menu">
      <el-scrollbar vertical style="height:100%">
        <el-menu :collapse="collapseSideMenu" class="el-menu-vertical-layout"
                 :collapse-transition="false" :default-active="mActiveIndex" background-color="#17334e"
                 text-color="white" active-text-color="white" router>
          <menu-tree :menu-data="menuList"></menu-tree>
        </el-menu>
      </el-scrollbar>
    </div>
  </el-aside>
</template>

<script>
import {RoutesMenu} from "../../router/routes-menu"
import menuTree from "@/layouts/components/menu-tree";
import {mapState} from 'vuex'

export default {
  name: "side-menu",
  components: {
    menuTree
  },
  data() {
    return {
      title: "OpenAi",
      isCollapse: false,
      menuList: RoutesMenu
    }
  },
  computed: {
    ...mapState(['collapseSideMenu']),
    mActiveIndex() {
      return this.$route.path
    },
    sideMenuStyle() {
      return {overflow: 'hidden', width: this.collapseSideMenu ? '64px' : '250px'}
    }
  },
  methods: {}
}
</script>

<style scoped>
.side-menu-layout {
  background: #17334e;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  transition: width 0.18s;
}

.logo-view {
  width: 25px;
  height: 25px;
  margin-left: 20px;
}

.sider-head-title {
  margin-left: 10px;
}

.sider-head {
  height: 64px;
  color: white;
  background: #17334e;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}

.sider-head:hover {
  background: #011528;
}

.sider-menu {
  height: calc(100% - 64px);
}

.el-menu-vertical-layout:not(.el-menu--collapse) {
  width: 250px;
}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden !important;
}

/deep/ .el-menu {
  border-right: none;
}

/deep/ .el-menu-item.is-active {
  color: #fff !important;
  background-color: #1ab394 !important;
}

/* 这里是解决了el-menu折叠后显示不正常的问题，因为在它的子组件里面最外层放的是div */
/deep/ .el-menu--collapse > .submenu-container > .el-submenu > .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}

/deep/ .el-menu--collapse > .submenu-container > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
</style>
